<template>
  <div class="h-full flex flex-col">
    <div class="flex-grow">
      <AuTable ref="tableRef" v-bind="gridOption" @actionClick="actionClick">
        <template #topWrap>
          <div class="text-[#242930]">
            <span class="text-[--autata-font-gray-color]">{{
              t("menus.deviceBreakdown")
            }}</span>
            <!--            {{ route.query.name }}-->
          </div>
        </template>
        <template #store_default="{ row }">
          {{ storeKeyValue[row.storeId] }}
        </template>
      </AuTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import {
  deviceGetList,
  DeviceProp,
  faultRecordGetList,
  FaultRecordProp,
  faultRecordUpd
} from "@/api/teaInfuser/device";
import { useRoute, useRouter } from "vue-router";
import { AuTable } from "@/components/AuTable";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { formulaVerGetList } from "@/api/teaInfuser/formula";
import { useI18n } from "vue-i18n";
import dayjs from "dayjs";
import { getStoreList } from "@/api/teaInfuser/store";

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const { proxy } = getCurrentInstance();

const tableRef = ref();

const gridOption = reactive<PropDefines>({
  isServerPage: true,
  columns: [
    { field: "deviceId", title: "device_manage.form.device_code" },
    {
      field: "storeName",
      title: "device_manage.form.store_name",
      slots: { default: "store_default" },
      exportMethod: ({ row }) => {
        return storeKeyValue.value[row.storeId];
      }
    },
    {
      field: "desc",
      title: "device_manage.form.error_reason"
    },
    {
      field: "faultTimeMillisecond",
      title: "device_manage.form.fault_time",
      width: 190,
      formatter({ cellValue }) {
        return dayjs(cellValue).format("YYYY-MM-DD HH:mm:ss");
      },
      exportMethod: ({ row }) => {
        return dayjs(row.faultTimeMillisecond).format("YYYY-MM-DD HH:mm:ss");
      }
    }
  ],
  actions: [ACTION_TYPE.REFRESH],
  operateTools: [
    {
      key: "",
      name: "table.processed",
      onClick: (v: FaultRecordProp) => {
        proxy.$auMessageBox
          .confirm(
            t("device_manage.form.confirm_action", {
              action: t("table.processed"),
              device: v.deviceId
            }),
            t("notice.title")
          )
          .then(() => {
            const param = {
              id: v.id,
              handleStatus: 1
            };
            faultRecordUpd(param).then(async () => {
              proxy.$message.success(
                t("device_manage.table.action_success", {
                  action: t("table.processed")
                })
              );
              await initOffDevBreakdown();
            });
          });
      }
    }
  ],
  dataSource: []
  // fetchConfig: {
  //   query: {
  //     service: (params: ObjectProps) => {
  //       return deviceGetList(params);
  //     },
  //     param: () => {
  //       return {
  //         store_id: route.query.id
  //       };
  //     }
  //   }
  // }
});
const storeKeyValue = ref({});

const initOffDevBreakdown = async () => {
  const res = await faultRecordGetList({
    start_page: 0,
    size: 0,
    faultRecord: {
      handleStatus: 0
    }
  });
  gridOption.dataSource = res.data;
};

const getStoreData = async () => {
  const res = await getStoreList({
    start_page: 1,
    size: 0
  });
  for (const item of res.data) {
    storeKeyValue.value[item.id] = item.name;
  }
};

const actionClick = ({ key }: { key: string }) => {
  switch (key) {
    case ACTION_TYPE.REFRESH:
      initOffDevBreakdown();
      break;
  }
};

onMounted(() => {
  getStoreData();
  initOffDevBreakdown();
});
</script>

<style lang="scss" scoped>
.device-table {
  :deep(table) {
    background: #f5f9ff !important;
  }

  :deep(.el-table th.el-table__cell) {
    background: #f5f9ff;
  }

  :deep(.el-table tr) {
    background: #f5f9ff;
  }
}
</style>
